<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>Axios入门案例</title>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h4 v-text="user">{{user}}</h4>
			<table border="5px" width="100%">
				<tr>
					<th>id</th>
					<th>name</th>
					<th>age</th>
					<th>sex</th>
				</tr>
				<tr v-for="r in user" align="center">
					<td v-text="r.id"></td>
					<td v-text="r.name"></td>
					<td v-text="r.age"></td>
					<td v-text="r.sex"></td>
				</tr>
			</table>
		</div>
		<!-- 使用步骤
				1.导入js函数类库
				2.发起ajax请求,之后业务处理
		-->
		<!-- 利用axios获取后台用户列表信息 -->
		<script>
		/**
		 * axios请求方式
		 * 1.请求类型
		 * 		1.get  执行查询的业务
		 * 		2.post  执行的是form表单提交(登录/新增)
		 * 		3.put   执行的是修改操作
		 * 		4.delete  执行的是删除
		 * 2.语法:
		 * 		1.axiox.get("url地址信息","参数信息")
		 * 				 .then(function(args){
		 * 
		 *	                    })
		 * 3.关于args参数说明
		 * 		axios为了统筹返回值的获取方式,将所有的返回值数据利用promise对象进行封装
		 */
		axios.get("http://localhost:8090/findall").then(function(result){
			console.log(result.data)
		})
			new Vue({
				el : "#app",
				data: {
					user:[
						{
							id : '',
							name : '',
							age : '',
							sex : ''
						}
					]
				},
				mounted : function(){
					axios.get("http://localhost:8090/findall").then(
						a => (
							this.user = a.data
						)
					)
					
				}
			})
		</script>
	</body>
</html>
